<template>
<div>
    <header >
      <van-nav-bar
        title="购物车"
        right-text=""
        left-arrow
        @click-left="$router.go(-1)"
      />

       <!-- <div>
        <a href="javascript:void(0);">
            <van-icon name="arrow-left" />
        </a>
       </div>
       <div class="header-h3">
           <h3>购物车</h3>
       </div>
       <div>
          
       </div> -->
      
    </header>
      <Shopnone v-if="Object.keys(list).length === 0"></Shopnone>
      <Shopcar v-else></Shopcar>
      <Userlike v-on:commonId='todetail'></Userlike>
  
</div>
</template>
<script>


import Vue from 'vue';
import { mapState } from 'vuex'

import { Icon } from 'vant';
import { NavBar } from 'vant';
import Shopnone from "@/shoplist/shopnone"
import Userlike from "@/shoplist/userlike"
import Shopcar from "@/shoplist/shopcar"

Vue.use(Icon);
Vue.use(NavBar);
export default {
    methods: {
      todetail(commonId){
        this.$router.push({
          path:'/detail',
          query:{
            itemId:commonId
          }
        })
      }
    },

    components: {
        Shopnone,
        Userlike,
        Shopcar
    },
    computed:{
      ...mapState('products' , {
        list:'list'
      }),
    }

}
</script>
<style lang='stylus' scoped>


// header 
//   height .44rem
//   display flex
//   align-items center
//   padding 0 0.066rem
//   border-bottom 1px solid #EEE
//   position fixed
//   z-index 22
//   width 100%
//   top 0
//   background #fff
//   .van-icon
//     font-size 0.1995rem
//     color #A7A7A7
//   .header-h3
//     flex 1
//     text-align center
//     h3 
//       font-weight 500
//       color: #232326;
//       font-size 0.15rem
    

</style>

<style lang="stylus" >
.van-nav-bar__arrow
  font-size 0.20rem
.van-cion 
  color #A7A7A7 
</style>